<template>
	<!-- <el-collapse @change="handleChangeCollapse" :accordion="true" v-model="activeNames">
		<el-collapse-item :name="showType">
			<template #title>
				<div class="col">
					<el-icon :size="14">
						<Menu />
					</el-icon>
					{{name}}
				</div>
			</template>
			<slot name="mains"></slot>
		</el-collapse-item>
	</el-collapse> -->
	<div class="collapse">
		<div class="header" @click="handleChangeCollapse">
			<el-icon :size="15">
				<Menu style="cursor: pointer;" />
			</el-icon>
			<span v-if="!showMain" style="cursor: pointer;margin-left: 5px;margin-right: 5px;">{{name}}</span>
			<span v-else style="cursor: pointer;margin-left: 5px;margin-right: 5px;">{{names}}</span>
			<el-icon :size="15">
				<ArrowDown v-if="!showMain" />
				<ArrowUp v-else />
			</el-icon>
		</div>
		<div class="main" :class="{'my-disabled':(!showMain)}">
			<slot name="mains"></slot>
		</div>
	</div>
</template>

<script lang="ts" setup>
	const props = defineProps({
		name: {
			type: String,
			default: ''
		},
		names: {
			type: String,
			default: ''
		},
		showMain: {
			type: Boolean,
			default: false
		}
	})
	const emit = defineEmits(['handleChangeCollapse'])
	const handleChangeCollapse = () => {
		emit('handleChangeCollapse')
	}
</script>

<style lang="scss" scoped>
	// ::v-deep .el-collapse-item__header {
	// 	justify-content: center;
	// }

	// ::v-deep .el-collapse-item__arrow {
	// 	margin-left: 10px;
	// }

	// ::v-deep .el-card__body {
	// 	padding: 0;
	// }

	// ::v-deep .el-collapse-item__header {
	// 	height: 16px;
	// 	border: none;
	// }

	// ::v-deep .el-collapse-item__wrap {
	// 	border: none;
	// }

	// ::v-deep .el-collapse-item__content {
	// 	padding-bottom: 0;
	// }

	// .col {
	// 	width: 70px;
	// 	height: 20px;
	// 	line-height: 20px;
	// 	text-align: center;
	// 	border-radius: 4px;
	// 	display: flex;

	// 	.el-icon {
	// 		margin-top: 2px;
	// 		margin-right: 4px;
	// 	}
	// }
</style>
<style lang="scss" scoped>
	.collapse {
		display: flex;
		flex-direction: column;
		.header {
			display: flex;
			height: 20px;
			text-align: center;
			justify-content: center;
			align-items: center;
		}

		.my-disabled {
			display: none;
		}
	}
</style>
